<!-- 网络类型列表显示 -->
<template>
    <div>
        <div class="common-layout">
            <el-container>
                <el-container>
                    <el-header>
                        <!-- 查询条件 -->
                        <div style="width: 100%;padding-top: 20px;border: 1px solid cadetblue">
                            <el-form :inline="true" :model="ShowData" class="demo-form-inline"
                                style="text-align: center;">

                                <el-form-item label="事件级别">
                                    <el-select v-model="ShowData.eventLevel" placeholder="请输所属区域" style="width: 200px;">
                                        <el-option label="一般" value="1" />
                                        <el-option label="紧急" value="2" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="fetchData">搜索</el-button>
                                    <el-button type="" @click="chengzho">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>

                    </el-header>
                    <el-main>
                        <!--列表 -->

                        <div style="width: 100%;padding-top: 20px;border: 1px solid cadetblue">
                            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                                <el-tab-pane label="全部事件" name="全部事件">
                                    <el-table :data="tableData" style="width: 100%; border: 1px solid cadetblue"
                                        :row-class-name="tableData">
                                        <el-table-column type="index" label="序号" width="60" align="center" />
                                        <el-table-column prop="incidentDescription" label="事件描述"
                                            style="width: 250px;" />
                                        <el-table-column prop="eventType" label="事件类型" style="width: 250px;" />
                                        <el-table-column prop="eventSource" label="事件来源" style="width: 250px;" />
                                        <el-table-column prop="reportingTime" label="上报时间" style="width: 250px;">
                                            <template v-slot="a">
                                                {{ a.row.reportingTime.replace("T", " ") }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="informant" label="上报人" style="width: 250px;" />
                                        <el-table-column prop="alertStatus" label="预警状态" style="width: 250px;">
                                            <template v-slot="scope">
                                                <el-button type="success" circle v-if="scope.row.alertStatus == 0" />
                                                <el-button type="danger" circle v-else />
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="nodeType" label="当前节点" style="width: 250px;" />
                                        <el-table-column label="操作">
                                            <template v-slot="scope">
                                                <el-link type="success"
                                                    @click="dialogVisible = true, resetForm(ruleFormRef), handleEdit(scope.row.id)">办理</el-link>&nbsp;
                                                <el-link type="warning"
                                                    @click="dialogVisible1 = true, resetForm(ruleFormRef)">延期</el-link>&nbsp;
                                                <el-link type="danger"
                                                    @click="dialogVisible2 = true, resetForm(ruleFormRef)">挂起</el-link>&nbsp;
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-tab-pane>

                                <el-tab-pane label="督办催办事件" name="督办催办事件">
                                    <!--显示列表-->
                                    <el-table :data="tableData" class="table">

                                        <el-table-column prop="incidentDescription" label="事件描述"
                                            style="width: 250px;" />
                                        <el-table-column prop="eventType" label="事件类型" style="width: 250px;" />
                                        <el-table-column prop="eventSource" label="事件来源" style="width: 250px;" />
                                        <el-table-column prop="reportingTime" label="上报时间" style="width: 250px;">
                                            <template v-slot="spoce">
                                                {{ spoce.row.reportingTime.substring(0,
                                                10) }}&nbsp;
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="informant" label="上报人" style="width: 250px;" />
                                        <el-table-column prop="closedTime" label="结案时间" style="width: 250px;">
                                            <template v-slot="spoce">
                                                {{ spoce.row.closedTime.substring(0,
                                                10) }}&nbsp;
                                            </template>
                                        </el-table-column>
                                     
                                    </el-table>
                                </el-tab-pane>

                                <el-tab-pane label="延期事件" name="延期事件">延期事件</el-tab-pane>
                                <el-tab-pane label="挂起事件" name="挂起事件">挂起事件</el-tab-pane>
                                <el-tab-pane label="超期事件" name="超期事件">超期事件</el-tab-pane>
                            </el-tabs>
                            <!-- 分页 -->
                            <table style="margin: 5px auto;">
                                <tbody>
                                    <tr>
                                        <td>
                                            <el-pagination v-model:current-page="page.page"
                                                v-model:page-size="page.size" :page-sizes="[3, 5, 10, 15]" background
                                                layout="total,slot" :total="page.tatalCount"
                                                @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                                prev-text="上一页" next-text="下一页">
                                                <span>
                                                    &nbsp;可以显示{{ page.size }}条，一共{{ page.pageCount }}页，当前是第{{ page.page
                                                    }}页
                                                </span>
                                            </el-pagination>
                                        </td>
                                        <td>
                                            <el-pagination v-model:current-page="page.page"
                                                v-model:page-size="page.size" :page-sizes="[3, 5, 10, 15]" background
                                                layout="sizes, slot,prev, pager, next" :total="page.tatalCount"
                                                @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                                prev-text="上一页" next-text="下一页">
                                            </el-pagination>
                                        </td>
                                        <td>
                                            <el-pagination v-model:current-page="page.page"
                                                v-model:page-size="page.size" :page-sizes="[3, 5, 10, 15]" background
                                                layout="slot,jumper" :total="page.tatalCount"
                                                @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                                prev-text="上一页" next-text="下一页">
                                            </el-pagination>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </el-main>
                </el-container>
            </el-container>
        </div>
        <!-- 事件办理弹出层 -->

        <el-dialog v-model="dialogVisible" title="事件办理" width="700">
            <span>

                <el-tabs v-model="activeName1" type="card" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="事件信息" name="事件信息">
                        <!-- 举报信息 -->
                        <el-form ref="ruleFormRef" style="max-width: 600px;padding-top: 5px;" :model="ruleForm"
                            :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
                            <h4 style="padding-bottom: 5px;padding-left: 5px;">举报信息</h4>
                            <hr>
                            <el-row :gutter="20" style="padding-top: 10px;">
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="事件来源" prop="eventSource">
                                        <el-select v-model="ruleForm.eventSource" placeholder="请选择事件来源">
                                            <el-option label="网格员上报" value="网格员上报" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="上报人:" prop="informant" style="width: 300px;">
                                        <el-input v-model="ruleForm.informant" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="联系电话:" prop="phone">
                                        <el-input v-model="ruleForm.phone" />
                                    </el-form-item></el-col>
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="上报时间:" prop="reportingTime" style="width: 300px;">
                                        <el-date-picker v-model="ruleForm.reportingTime" type="date"
                                            placeholder="请选择上报时间" value-format="YYYY-MM-DD" />
                                    </el-form-item></el-col>
                            </el-row>
                            <!-- 事件信息 -->
                            <h4 style="padding-bottom: 5px;padding-left: 5px;">事件信息</h4>
                            <hr>
                            <el-row :gutter="20" style="padding-top: 10px;">
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="事件描述:" prop="incidentDescription">
                                        <el-input v-model="ruleForm.incidentDescription" type="textarea" />
                                    </el-form-item></el-col>
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="事件级别" prop="resource">
                                        <el-radio-group v-model="ruleForm.resource">
                                            <el-radio value="1">一般</el-radio>
                                            <el-radio value="2">紧急</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="位置描述:" prop="locationDescription   ">
                                        <el-input v-model="ruleForm.locationDescription" type="textarea" />
                                    </el-form-item></el-col>
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="是否在地图内" prop="map">
                                        <el-radio-group v-model="ruleForm.map">
                                            <el-radio value="1">是</el-radio>
                                            <el-radio value="2">否</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="事件类型:" prop="eventType">
                                        <el-select v-model="ruleForm.eventType" placeholder="请选择事件类型">
                                            <el-option label="事件" value="事件" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="事件坐标:" prop="eventCoordinate" style="width: 300px;">
                                        <el-input v-model="ruleForm.eventCoordinate" />
                                    </el-form-item></el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="选择大类" prop="selectiveCategory">
                                        <el-select style="width: 300px;" v-model="ruleForm.selectiveCategory"
                                            placeholder="请选择大类">
                                            <el-option label="事件" value="事件" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="所属网格:" prop="owningGrid" style="width: 300px;">
                                        <el-input v-model="ruleForm.owningGrid" disabled />
                                    </el-form-item></el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="选择小类" prop="selectiveSubclass">
                                        <el-select v-model="ruleForm.selectiveSubclass" placeholder="请选择小类">
                                            <el-option v-for="option in options3" :key="option.value"
                                                :label="option.label" :value="option.value" />
                                        </el-select>
                                    </el-form-item>

                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12" :offset="0">
                                    <el-form-item label="上传附件:" prop="grid_class">

                                        <el-upload class="avatar-uploader"
                                            action="http://10.31.60.18:8000/IncidentSetRout/api/FormManagement/FileNameURL"
                                            :show-file-list="false" :on-success="handleAvatarSuccess">
                                            <img v-if="ruleForm.uploadAttachments"
                                                :src="'http://10.31.60.18:8000/IncidentSetRout/images/' + ruleForm.uploadAttachments"
                                                class="avatar" />
                                            <el-icon v-else class="avatar-uploader-icon">
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>

                    </el-tab-pane>
                    <el-tab-pane label="督办信息" name="督办信息">
                        <!-- 督办信息 -->
                        <el-form ref="ruleFormRef" style="max-width: 600px;padding-top: 10px;" :model="ruleForm"
                            :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>

                            <el-form-item label="督办单位:" prop="industryType" style="width: 600px;">
                                <el-input v-model="ruleForm.industryType" type="textarea" />
                            </el-form-item>

                            <el-form-item label="督办意见:" prop="industryType" style="width: 600px;">
                                <el-input v-model="ruleForm.industryType" type="textarea" />
                            </el-form-item>

                            <!-- 回复信息 -->
                            <h4 style="padding-bottom: 5px;padding-left: 5px;">回复信息</h4>
                            <hr>
                            <el-form-item label="回复督办:" prop="industryType" style="width: 600px;padding-top: 10px;">
                                <el-input v-model="ruleForm.industryType" type="textarea" />
                            </el-form-item>
                        </el-form>

                    </el-tab-pane>
                    <el-tab-pane label="催办信息" name="催办信息">

                        <!-- 催办事件 -->

                        <el-form ref="ruleFormRef" style="max-width: 600px;padding-top: 10px;" :model="ruleForm"
                            :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>

                            <el-form-item label="催办单位:" prop="industryType" style="width: 600px;">
                                <el-input v-model="ruleForm.industryType" type="textarea" />
                            </el-form-item>

                            <el-form-item label="催办意见:" prop="industryType" style="width: 600px;">
                                <el-input v-model="ruleForm.industryType" type="textarea" />
                            </el-form-item>

                            <!-- 回复信息 -->
                            <h4 style="padding-bottom: 5px;padding-left: 5px;">回复信息</h4>
                            <hr>
                            <el-form-item label="回复催办:" prop="industryType" style="width: 600px;padding-top: 10px;">
                                <el-input v-model="ruleForm.industryType" type="textarea" />
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>

            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        保存
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 申请延期弹出层 -->
        <el-dialog v-model="dialogVisible1" title="申请延期" width="500">
            <span>

                <el-form ref="ruleFormRef" style="max-width: 600px;padding-top: 10px;" :model="ruleForm" :rules="rules"
                    label-width="auto" class="demo-ruleForm" status-icon>

                    <el-form-item label="申请部门:" prop="industryType">
                        <el-input v-model="ruleForm.industryType" />
                    </el-form-item>
                    <el-form-item label="申请人:" prop="industryType">
                        <el-input v-model="ruleForm.industryType" />
                    </el-form-item>
                    <el-form-item label="申请时间:" prop="industryType">
                        <el-input v-model="ruleForm.industryType" />
                    </el-form-item>
                    <el-form-item label="延期时间:" prop="industryType">
                        <el-input v-model="ruleForm.industryType" />
                    </el-form-item>

                    <el-form-item label="延期理由:" prop="industryType">
                        <el-input v-model="ruleForm.industryType" type="textarea" />
                    </el-form-item>
                </el-form>
            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        保存
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 申请挂起弹出层 -->
        <el-dialog v-model="dialogVisible2" title="申请挂起" width="500">
            <span>

                <el-form ref="ruleFormRef" style="max-width: 600px;padding-top: 10px;" :model="ruleForm" :rules="rules"
                    label-width="auto" class="demo-ruleForm" status-icon>

                    <el-form-item label="申请部门:" prop="industryType">
                        <el-input v-model="ruleForm.industryType" />
                    </el-form-item>
                    <el-form-item label="申请人:" prop="industryType">
                        <el-input v-model="ruleForm.industryType" />
                    </el-form-item>
                    <el-form-item label="申请时间:" prop="industryType">
                        <el-input v-model="ruleForm.industryType" />
                    </el-form-item>
                    <el-form-item label="挂起理由:" prop="industryType">
                        <el-input v-model="ruleForm.industryType" type="textarea" />
                    </el-form-item>
                </el-form>
            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        保存
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </div>
            </template>
        </el-dialog>

    </div>

</template>

<script setup lang="ts">
//引入axios
import axios from 'axios';
//引入组件
import { ref, reactive, onMounted } from "vue";

import type { FormInstance, FormRules } from 'element-plus';

import { ElMessage, ElMessageBox } from 'element-plus'
//标签页
import type { TabsPaneContext } from 'element-plus'

import { Plus } from '@element-plus/icons-vue'

const activeName = ref('first')
const activeName1 = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}


const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)

const ruleFormRef = ref<FormInstance>()

//表单
const ruleForm = reactive({
    id: 0,
    eventSource: '',
    informant: '',
    phone: '',
    reportingTime: '',
    incidentDescription: '',
    resource: '',
    map: '',
    locationDescription: '',
    eventCoordinate: '',
    eventType: '',
    owningGrid: '三级网格',
    industryType: '',
    selectiveCategory: '',
    selectiveSubclass: '',
    uploadAttachments: '',
    nodeId: '',
    circulatingOpinions: '',
})


interface Ioption {
    label: string,
    value: number,
}
//绑定小类下拉框
const options3 = ref<Ioption[]>([])
//绑定小类下拉框
const BindSubclasses = async () => {
    try {
        const response = await axios.get('http://47.95.178.186:8000/GetLiGriddingRout/api/AssemType/ShowTreeInfo')
        // 将后端返回的选项数据保存到 options 中
        options3.value = response.data
    } catch (error) {
        console.error('获取下拉框选项失败:', error)
    }
}

//编辑
const handleEdit = (id: number) => {
    axios.get("http://47.95.178.186:8000/IncidentGetRout/api/FormManagementRead/MyEventBackfill?Id=" + id).then(res => {
        console.log(res.data.result);
        ruleForm.id = res.data.result.id
        ruleForm.eventSource = res.data.result.eventSource
        ruleForm.informant = res.data.result.informant
        ruleForm.phone = res.data.result.phone
        ruleForm.reportingTime = res.data.result.reportingTime
        ruleForm.incidentDescription = res.data.result.incidentDescription
        ruleForm.resource = res.data.result.resource
        ruleForm.map = res.data.result.map
        ruleForm.id = res.data.result.id
        ruleForm.eventSource = res.data.result.eventSource
        ruleForm.informant = res.data.result.informant
        ruleForm.phone = res.data.result.phone
        ruleForm.reportingTime = res.data.result.reportingTime
        ruleForm.incidentDescription = res.data.result.incidentDescription
        ruleForm.resource = res.data.result.resource
        ruleForm.map = res.data.result.map
        ruleForm.locationDescription = res.data.result.locationDescription
        ruleForm.eventCoordinate = res.data.result.eventCoordinate
        ruleForm.eventType = res.data.result.eventType
        ruleForm.owningGrid = res.data.result.owningGrid
        ruleForm.industryType = res.data.result.industryType
        ruleForm.selectiveCategory = res.data.result.selectiveCategory
        ruleForm.selectiveSubclass = res.data.result.selectiveSubclass
        ruleForm.uploadAttachments = res.data.result.uploadAttachments
        ruleForm.nodeId = res.data.result.nodeId
        ruleForm.circulatingOpinions = res.data.result.circulatingOpinions
    })
}

const handleAvatarSuccess = (img: string) => {
    ruleForm.uploadAttachments = img;
}

//删除
const handleDelete = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除吗？',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete("http://47.95.178.186:8000/GriddingSetsRout/api/Respon/ResponDel?Id=" + id).then(res => {
                if (res.data > 0) {
                    ElMessage.success("删除成功!");
                    fetchData();
                    return;

                } if (res.data > 0) {
                    ElMessage.error("删除失败！");
                    fetchData();
                    return;
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
//验证
const rules = reactive<FormRules>({
    owning_region: [
        {
            required: true,
            message: '所属街道不能为空！',
            trigger: 'change',
        },
    ],
    management_gridArr: [
        {
            required: true,
            message: '至少选择一项！',
            trigger: 'change',
        },
    ],
    industryType: [
        { required: true, message: '网格名称不能为空！', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
})

//保存按钮
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (ruleForm.id == 0) {
                axios.post("http://47.95.178.186:8000/GriddingSetsRout/api/Respon/ResponCreate", ruleForm).then(res => {
                    if (res.data > 0) {
                        ElMessage.success("新增成功！");
                        dialogVisible.value = false;
                        fetchData();
                        return;
                    } else {
                        ElMessage.error("新增失败！");
                        return;
                    }
                })
            } else {

                axios.put("http://47.95.178.186:8000/GriddingSetsRout/api/Respon/ResponUpd", ruleForm).then(res => {
                    if (res.data > 0) {
                        ElMessage.success("修改成功！");
                        dialogVisible.value = false;
                        fetchData();
                        return;
                    } else {
                        ElMessage.error("修改失败！");
                        return;
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
//重置按钮
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

//清空按钮
const chengzho = () => {
    ShowData.industryType = "";
    ShowData.Owning_region = "";
    ShowData.eventLevel = "";
    fetchData();
}

//分页方法
const handleSizeChange = (val: number) => {
    page.size = val;
    fetchData();
}
const handleCurrentChange = (val: number) => {
    page.page = val;
    fetchData();
}
const tableData = ref([])

//分页参数
const page = reactive({
    page: 1,
    size: 3,
    tatalCount: 0,
    pageCount: 0,
})

//所属区域
const AreaList = ref<{ value: number; text: string }[]>([]);

const Area = () => {
    axios.get("http://47.95.178.186:8000/GriddingGetRout/api/Cellgrid/AreaType").then(res => {
        AreaList.value = res.data;
    })
}

//左侧菜单
const ShuTrrList = ref([]);
const TrrList = () => {
}


//条件查询的表单
const ShowData = reactive({
    industryType: "",  //查询条件网络类型名称
    Owning_region: "",
    eventLevel: "",
    pp: "",
});

//异步显示列表
const fetchData = async () => {
    try {
        //response
        const res = await axios.get('http://47.95.178.186:8000/IncidentGetRout/api/FormManagementRead/ShowMyEvent', {
            params: {
                PageIndex: page.page,
                PageSize: page.size,
                eventLevel: ShowData.eventLevel || 0,
                Owning_region: ShowData.Owning_region || 0,
            }
        })

        tableData.value = res.data.data
        page.tatalCount = res.data.totalCount
        page.pageCount = res.data.pageCount
    } catch (error) {
        console.error(error)
    }
}
//显示列表
const fetchDatas = async () => {
    try {
        axios.get('http://47.95.178.186:8000/IncidentGetRout/api/FormManagementRead/ShowEvent', {
            params: {
                eventCategory: 7,
            }
        }).then(res => {
            tableData.value = res.data
        })
    } catch (error) {
        console.error(error)
    }
}

//首次加载显示列表信息
onMounted(() => {
    fetchData();
    Area();
    TrrList();
    BindSubclasses();
    fetchDatas();
})

</script>

<style scoped>
.container {
    /* 设置div居中对齐 */
    width: 100%;
    display: flex;
    justify-content: center;
}

.table-container {
    /* 设置table居中对齐 */
    display: flex;
    justify-content: center;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.avatar-uploader .avatar {
    width: 50px;
    height: 50px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    text-align: center;
}
</style>
